﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Knockout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="../../libs/knockout/v3.4.2/knockout-debug.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.13.0/umd/popper.min.js"></script>
</head>
<script>
    var myViewModel = {
        Name: "Lilei",
        profession: "软件工程师",
    };
</script>
<body>
    <div class="container">
    <div id='app1'> 
        姓名：<label data-bind="text:Name"></label><br />
        职业：<input type="text" data-bind="textinput:Profession" />
    </div>
    <div>
        <input type="text" id="txt_testobservable" />
    </div>
    <script type="text/javascript">
        //1.定义ViewModel
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: "软件工程师",
        };

        //2.激活绑定
        ko.applyBindings(myViewModel, document.getElementById('app1'));

        $(function () {
            //注册文本框的textchange事件
            $("#txt_testobservable").on("input", function () {
                myViewModel.Name($(this).val());
            });
        });
    </script>
    <hr>

    <form id="app"> 
        <div class="form-group">
            <label for="name2">姓名：</label>
            <input id='name2' type="text" class="form-control" data-bind="textinput:Name2" />
        </div>
        <div class="form-group">
            <label for="Profession2">职业：</label>
            <input id="Profession2" type="text" class="form-control"  data-bind="textinput:Profession2" />
        </div>
        描述：<label data-bind="text:Des"></label>
    </form>
    <script type="text/javascript">
        //1.定义ViewModel
        var myViewModel2 = {
            Name2: ko.observable("Lilei"),
            Profession2: ko.observable("软件工程师"),
        };
        myViewModel2.Des = ko.dependentObservable(function () {
            return "本人姓名——" + myViewModel2.Name2() + "，职业——" + myViewModel2.Profession2();
        });

        //2.激活绑定
        ko.applyBindings(myViewModel2, document.getElementById('app'));
    </script>

    <hr>
    <form id='app2'>
        <div class="form-group">
            <label for="deptArr">职业：</label>
            <select id='deptArr' class="form-control"  data-bind="options:deptArr,optionsText:'Name'"></select>
        </div>

        <div class="form-group">
            <label for="txt_party_observable">新增部门</label>
            <input type="text" class="form-control" id="txt_party_observable" />
        </div>
        <input type="button" class="btn btn-primary" id="btn_test" value="新增部门" />
        
    </form>
    <script type="text/javascript">
        var deptArr = ko.observableArray([
            { id: 1, Name: '研发部' },
            { id: 2, Name: '行政部' },
            { id: 3, Name: '人事部' }
        ]);
        var viewModel = {
            deptArr: deptArr,
        };

        ko.applyBindings(viewModel, document.getElementById('app2'));

        var i = 4;
        $(function () {
            $("#btn_test").on("click", function () {
                deptArr.push({ id: i++, Name: $("#txt_party_observable").val() });
            });
        });
    </script>
</div>
</body>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</html>